<template>
  <div class="main">
    <div class="appPc" v-if="$store.state.screenWidth > 1300">
      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Stock Info</h1>
      </div>

      <div class="stock interval">
        <h1 class="stock-title">Stock Quote</h1>
        <div class="stock-back">
          <div class="back-title">Mingteng International Corp Inc.(MTEN)</div>
          <div class="back-text">Nasdaq (At Close), Currency in USD</div>
          <div class="back-price">
            {{ stockObj.last_price }}
            <span>{{ stockObj.rise_fall }}({{ stockObj.rise_fall_per }})</span>
          </div>
          <div class="back-time">{{ stockObj.uptime }} (At Close)</div>
        </div>

        <div class="stock-block">
          <div class="list" v-for="(item, index) in 8" :key="index">
            <div class="left">
              {{
                index == 0
                  ? "Previous Close"
                  : index == 1
                  ? "Volume"
                  : index == 2
                  ? "Today’s Open"
                  : index == 3
                  ? "Average Volume (10 days)"
                  : index == 4
                  ? "Day's Range"
                  : index == 5
                  ? "Market Cap"
                  : index == 6
                  ? "52 Week Range"
                  : index == 7
                  ? "Total Shares Outstanding"
                  : ""
              }}
            </div>
            <div class="right">
              {{
                index == 0
                  ? stockObj.yesy_price
                  : index == 1
                  ? stockObj.volume
                  : index == 2
                  ? stockObj.open_price
                  : index == 3
                  ? stockObj.day10_volume
                  : index == 4
                  ? stockObj.low_price + "  -  " + stockObj.high_price
                  : index == 5
                  ? stockObj.mvalue
                  : index == 6
                  ? stockObj.week52_low + "  -  " + stockObj.week52_high
                  : index == 7
                  ? stockObj.equity
                  : ""
              }}
            </div>
          </div>
        </div>
      </div>

      <div class="charts interval" v-loading="loading">
        <div id="dayNewlyChart" style="width: 100%; height: 18.75rem"></div>
      </div>

      <div class="history interval">
        <div class="header">
          <div
            class="list"
            :class="{ 'list-active': index == timeActive }"
            v-for="(item, index) in timeList"
            :key="index"
            @click="historyStop(index)"
          >
            {{ item.title }}
          </div>
        </div>

        <div class="tables">
          <div class="assign">
            <div
              class="list"
              v-for="(item, index) in timeActive == 0 ? firstTab : secondTab"
              :key="index"
              :class="{
                list0: index == 0,
                list1: index == 1,
                list2: index == 2,
                list3: index == 3,
                list4: index == 4,
                list5: index == 5,
                list6: index == 6,
                list7: index == 7,
                list8: index == 8,
              }"
            >
              {{ item.title }}
            </div>
          </div>

          <div class="block" v-loading="loading">
            <div class="table" v-for="(info, num) in historyList" :key="num">
              <div
                class="list"
                v-for="(item, index) in timeActive == 0 ? 9 : 8"
                :key="index"
                :class="{
                  list0: index == 0,
                  list1: index == 1,
                  list2: index == 2,
                  list3: index == 3,
                  list4: index == 4,
                  list5: index == 5,
                  list6: index == 6,
                  list7: index == 7,
                  list8: index == 8,
                }"
              >
                <span v-if="timeActive == 0">
                  {{
                    index == 0
                      ? info.date
                      : index == 1
                      ? info.last_price
                      : index == 2
                      ? info.openFormatted
                      : index == 3
                      ? info.prevFormatted
                      : index == 4
                      ? info.lowFormatted
                      : index == 5
                      ? info.highFormatted
                      : index == 6
                      ? info.changeFormatted
                      : index == 7
                      ? info.changePercentFormatted
                      : index == 8
                      ? info.volume
                      : ""
                  }}
                </span>

                <span v-else>
                  {{
                    index == 0
                      ? info.date
                      : index == 1
                      ? info.openFormatted
                      : index == 2
                      ? info.prevFormatted
                      : index == 3
                      ? info.lowFormatted
                      : index == 4
                      ? info.highFormatted
                      : index == 5
                      ? info.changeFormatted
                      : index == 6
                      ? info.changePercentFormatted
                      : index == 7
                      ? info.volume
                      : index == 8
                      ? ""
                      : ""
                  }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="appH5" v-else>
      <div class="popup-lint"></div>

      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Stock Info</h1>
      </div>

      <div class="stock">
        <h2 class="stock-title">Stock Snapshot</h2>
        <div class="stock-back">
          <div class="back-title">Mingteng International Corp Inc.(MTEN)</div>
          <div class="back-text">Nasdaq (At Close), Currency in USD</div>
          <div class="back-price">
            {{ stockObj.last_price }}
            <span>{{ stockObj.rise_fall }}({{ stockObj.rise_fall_per }})</span>
          </div>
          <div class="back-time">{{ stockObj.uptime }} (At Close)</div>
        </div>

        <div class="stock-block">
          <div class="list" v-for="(item, index) in 8" :key="index">
            <div class="left">
              {{
                index == 0
                  ? "Previous Close"
                  : index == 1
                  ? "Volume"
                  : index == 2
                  ? "Today’s Open"
                  : index == 3
                  ? "Average Volume (10 days)"
                  : index == 4
                  ? "Day's Range"
                  : index == 5
                  ? "Market Cap"
                  : index == 6
                  ? "52 Week Range"
                  : index == 7
                  ? "Total Shares Outstanding"
                  : ""
              }}
            </div>
            <div class="right">
              {{
                index == 0
                  ? stockObj.yesy_price
                  : index == 1
                  ? stockObj.volume
                  : index == 2
                  ? stockObj.open_price
                  : index == 3
                  ? stockObj.day10_volume
                  : index == 4
                  ? stockObj.low_price + "  -  " + stockObj.high_price
                  : index == 5
                  ? stockObj.mvalue
                  : index == 6
                  ? stockObj.week52_low + "  -  " + stockObj.week52_high
                  : index == 7
                  ? stockObj.equity
                  : ""
              }}
            </div>
          </div>
        </div>
      </div>

      <div class="charts" v-loading="loading">
        <div id="dayNewlyChart" style="width: 100%; height: 100%"></div>
      </div>

      <div class="history">
        <div class="header">
          <div
            class="list"
            :class="{ 'list-active': index == timeActive }"
            v-for="(item, index) in timeList"
            :key="index"
            @click="historyStop(index)"
          >
            {{ item.title }}
          </div>
        </div>

        <div class="tables">
          <div class="assign">
            <div
              class="list"
              v-for="(item, index) in timeActive == 0 ? firstTab : secondTab"
              :key="index"
              :class="{
                list0: index == 0,
                list1: index == 1,
                list2: index == 2,
                list3: index == 3,
                list4: index == 4,
                list5: index == 5,
                list6: index == 6 && timeActive == 0,
                list7: index == 7 && timeActive == 0,
                list8: index == 8,
                list10: index == 6 && timeActive != 0,
                list11: index == 7 && timeActive != 0,
              }"
            >
              {{ item.title }}
            </div>
          </div>

          <div class="block" v-loading="loading">
            <div class="table" v-for="(info, num) in historyList" :key="num">
              <div
                class="list"
                v-for="(item, index) in timeActive == 0 ? 9 : 8"
                :key="index"
                :class="{
                  list0: index == 0,
                  list1: index == 1,
                  list2: index == 2,
                  list3: index == 3,
                  list4: index == 4,
                  list5: index == 5,
                  list6: index == 6 && timeActive == 0,
                  list7: index == 7 && timeActive == 0,
                  list8: index == 8,
                  list10: index == 6 && timeActive != 1,
                  list11: index == 7 && timeActive != 1,
                }"
              >
                <span v-if="timeActive == 0">
                  {{
                    index == 0
                      ? info.date
                      : index == 1
                      ? info.last_price
                      : index == 2
                      ? info.openFormatted
                      : index == 3
                      ? info.prevFormatted
                      : index == 4
                      ? info.lowFormatted
                      : index == 5
                      ? info.highFormatted
                      : index == 6
                      ? info.changeFormatted
                      : index == 7
                      ? info.changePercentFormatted
                      : index == 8
                      ? info.volume
                      : ""
                  }}
                </span>

                <span v-else>
                  {{
                    index == 0
                      ? info.date
                      : index == 1
                      ? info.openFormatted
                      : index == 2
                      ? info.prevFormatted
                      : index == 3
                      ? info.lowFormatted
                      : index == 4
                      ? info.highFormatted
                      : index == 5
                      ? info.changeFormatted
                      : index == 6
                      ? info.changePercentFormatted
                      : index == 7
                      ? info.volume
                      : index == 8
                      ? ""
                      : ""
                  }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { StockGet, StockTimeGet } from "../../api";

export default {
  data() {
    return {
      stockObj: {},
      //------
      timeList: [
        {
          type: 1,
          title: "1D",
        },
        {
          type: 2,
          title: "5D",
        },
        {
          type: 3,
          title: "1M",
        },
        {
          type: 4,
          title: "3M",
        },
        {
          type: 5,
          title: "6M",
        },
        {
          type: 6,
          title: "1Y",
        },
        {
          type: 7,
          title: "2Y",
        },
        {
          type: 8,
          title: "5Y",
        },
      ],
      timeActive: 0,
      //----------
      firstTab: [
        {
          title: "Date",
        },
        {
          title: "Price",
        },
        {
          title: "Open",
        },
        {
          title: "Prev",
        },
        {
          title: "Low",
        },
        {
          title: "High",
        },
        {
          title: "Change",
        },
        {
          title: "Change, %",
        },
        {
          title: "Volume",
        },
      ],
      secondTab: [
        {
          title: "Date",
        },
        {
          title: "Open",
        },
        {
          title: "Prev",
        },
        {
          title: "Low",
        },
        {
          title: "High",
        },
        {
          title: "Change",
        },
        {
          title: "Change, %",
        },
        {
          title: "Volume",
        },
      ],
      //--------------
      historyList: [],
      loading: false,
    };
  },
  created() {
    this.StockGetMet();
    this.StockTimeGetMet();
    this.scrollTotap();
  },
  mounted() {},
  methods: {
    scrollTotap() {
      window.scrollTo(0, 0);
    },
    StockGetMet() {
      let params = {};

      StockGet(params).then((res) => {
        if (res.errorCode == null) {
          let fuhao = res.resultData.rise_fall_per.substring(0, 1);
          res.resultData.rise_fall_per =
            fuhao + "" + res.resultData.rise_fall_per * 1 + "%";

          this.stockObj = res.resultData;
        }
      });
    },
    StockTimeGetMet() {
      //--------
      let params = {
        timeType: this.timeList[this.timeActive].type,
      };

      StockTimeGet(params).then((res) => {
        if (res.errorCode == null) {
          this.historyList = res.resultData.stockLogList;
          this.loading = false;
          // let data = res.resultData.stockLogList;
          // 时间数组排序
          var earningsChartArrayTiem = [];
          // 这个月每天的金额
          var earningsChartArrayPrice = [];
          res.resultData.stockLogList.forEach((item, index) => {
            earningsChartArrayTiem.push(item.date.slice(0, 6));
            earningsChartArrayPrice.push(item.highFormatted);
          });

          this.historyColumnar(earningsChartArrayTiem, earningsChartArrayPrice);
        }
      });
    },

    historyStop(index) {
      this.timeActive = index;
      this.loading = true;
      this.StockTimeGetMet();
    },
    //--------------
    // 首页第二模块 当月新增人数折线图
    historyColumnar(data, hight) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
        document.getElementById("dayNewlyChart")
      );
      // 绘制图表
      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["value"],
          },
          toolbox: {
            show: true,
          },
          calculable: true,
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: data,
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                formatter: "{value}",
              },
            },
          ],
          series: [
            {
              name: "value",
              type: "line",
              data: [11, 11, 15, 13, 12, 13, 10],
            },
          ],
        },
        true
      );
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .appPc {
    .backdrop {
      height: 205px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 48px;
        font-weight: bold;
      }
    }

    .stock {
      padding: 30px 0;
      box-sizing: border-box;

      .stock-title {
        font-weight: 500;
        font-size: 48px;
        margin-bottom: 60px;
        text-align: center;
      }

      .stock-back {
        padding: 30px;
        box-sizing: border-box;
        background: #276cd3;
        display: inline-block;
        border-radius: 20px;
        .back-title {
          color: #fff;
          font-size: 28px;
          font-weight: 500;
          margin-bottom: 5px;
        }

        .back-text {
          font-size: 18px;
          color: #fff;
          font-weight: 500;
          margin-bottom: 5px;
        }

        .back-price {
          font-size: 48px;
          color: #fff;
          font-weight: 500;

          span {
            font-size: 30px;
          }
        }

        .back-time {
          font-size: 18px;
          color: #fff;
          font-weight: 500;
          margin-top: 5px;
        }
      }

      .stock-block {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;

        .list {
          width: 47%;
          height: 50px;
          border-bottom: 1px solid #2c3341;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-right: 30px;

          .left,
          .right {
            font-size: 17px;
            font-weight: 500;
            color: #2c3341;
          }
        }

        .list:last-child {
          margin-right: 0;
        }

        .info {
          display: flex;
          align-items: center;

          color: #276cd3;
          font-size: 20px;
          font-weight: 600;
          margin-top: 30px;

          img {
            width: 30px;
            height: 30px;
            margin-left: 10px;
          }
        }
      }
    }

    .charts {
      margin-top: 40px;
      margin-bottom: 40px;
    }

    .history {
      margin-top: 40px;
      margin-bottom: 60px;

      .header {
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .list {
          cursor: pointer;
          width: calc((100% / 8) - 40px);
          height: 100%;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          font-weight: 500;
          color: #276cd3;
        }

        .list-active {
          background: #276cd3;
          color: #fff;
        }
      }

      .tables {
        margin-top: 20px;
        .assign {
          background: #e5f0ff;
          height: 50px;
          width: 100%;
          display: flex;
          align-items: center;
          border-radius: 5px;
          padding: 0 20px;
          box-sizing: border-box;
          justify-content: space-between;

          .list {
            font-weight: 500;
            font-size: 18px;
            color: #000;
            text-align: left;
          }

          .list0 {
            width: 20%;
          }
          .list1 {
            width: 10%;
          }
          .list2 {
            width: 10%;
          }
          .list3 {
            width: 10%;
          }
          .list4 {
            width: 10%;
          }
          .list5 {
            width: 10%;
          }
          .list6 {
            width: 12%;
          }
          .list7 {
            width: 12%;
          }
          .list8 {
            width: 10%;
          }
        }

        .block {
          .table {
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            border-radius: 5px;
            padding: 0 20px;
            box-sizing: border-box;
            justify-content: space-between;

            .list {
              font-weight: 300;
              font-size: 16px;
              color: #505050;
              text-align: left;
            }

            .list0 {
              width: 20%;
            }
            .list1 {
              width: 10%;
            }
            .list2 {
              width: 10%;
            }
            .list3 {
              width: 10%;
            }
            .list4 {
              width: 10%;
            }
            .list5 {
              width: 10%;
            }
            .list6 {
              width: 12%;
            }
            .list7 {
              width: 12%;
            }
            .list8 {
              width: 10%;
            }
          }
        }
      }
    }
  }

  .appH5 {
    .backdrop {
      height: 200px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 24px;
        font-weight: bold;
      }
    }

    .stock {
      padding: 20px 10px;
      box-sizing: border-box;

      .stock-title {
        letter-spacing: 0.2px;
        font-size: 20px;
        font-weight: 500;
      }

      .stock-back {
        background: #276cd3;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 10px;
        display: inline-block;

        .back-title {
          color: #fff;
          font-size: 20px;
          font-weight: 600;
        }
        .back-text {
          color: #fff;
          font-size: 14px;
          font-weight: 500;
          margin-top: 2px;
        }

        .back-price {
          color: #fff;
          font-size: 30px;
          font-weight: bold;
          margin-top: 2px;

          span {
            font-size: 16px;
          }
        }

        .back-time {
          margin-top: 2px;
          font-size: 14px;
          color: #fff;
          font-weight: 500;
        }
      }

      .stock-block {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;

        .list {
          width: 100%;
          height: 40px;
          border-bottom: 1px solid #2c3341;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left,
          .right {
            font-size: 14px;
            font-weight: 500;
            color: #2c3341;
          }
        }

        .info {
          display: flex;
          align-items: center;

          color: #276cd3;
          font-size: 18px;
          font-weight: 500;
          margin-top: 30px;

          img {
            width: 30px;
            height: 30px;
            margin-left: 10px;
          }
        }
      }
    }

    .charts {
      margin-top: 40px;
      margin-bottom: 40px;
      height: 400px;
    }

    .history {
      margin-top: 40px;
      margin-bottom: 60px;

      .header {
        padding: 0 10px;
        box-sizing: border-box;
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .list {
          cursor: pointer;
          width: calc((100% / 8));
          height: 100%;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: 500;
          color: #276cd3;
        }

        .list-active {
          background: #276cd3;
          color: #fff;
        }
      }

      .tables {
        margin-top: 20px;
        .assign {
          background: #e5f0ff;
          height: 50px;
          width: 100%;
          display: flex;
          align-items: center;
          border-radius: 5px;
          padding: 0 5px;
          box-sizing: border-box;

          .list {
            font-weight: 500;
            font-size: 10px;
            color: #000;
            text-align: left;
          }

          .list0 {
            width: 20%;
          }
          .list1 {
            width: 10%;
          }
          .list2 {
            width: 10%;
          }
          .list3 {
            width: 10%;
          }
          .list4 {
            width: 10%;
          }
          .list5 {
            width: 10%;
          }
          .list6 {
            width: 12%;
          }
          .list7 {
            width: 20%;
          }
          .list8 {
            width: 10%;
          }

          .list10 {
            width: 17%;
            margin-left: 3%;
          }
          .list11 {
            width: 10%;
          }
        }

        .block {
          .table {
            height: 40px;
            width: 100%;
            display: flex;
            align-items: center;
            padding: 0 5px;
            box-sizing: border-box;
            border-bottom: 1px solid #ccc;
            border-top-left-radius: 0;
            border-bottom-right-radius: 0;

            .list {
              font-weight: 300;
              font-size: 10px;
              color: #505050;
              text-align: left;
            }

            .list0 {
              width: 20%;
            }
            .list1 {
              width: 10%;
            }
            .list2 {
              width: 10%;
            }
            .list3 {
              width: 10%;
            }
            .list4 {
              width: 10%;
            }
            .list5 {
              width: 10%;
            }
            .list6 {
              width: 12%;
            }
            .list7 {
              width: 20%;
            }
            .list8 {
              width: 10%;
            }

            .list10 {
              width: 17%;
              margin-left: 3%;
            }
            .list11 {
              width: 10%;
            }
          }
        }
      }
    }
  }
}
</style>